<template>
  <van-nav-bar
      title="历年真题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
<div>
  <van-cell-group>
    <van-list
        v-model:loading="loading"
        :finished="finished"
    >
      <van-swipe-cell  v-for="n in yearquestions" >
        <!-- 添加图像，这里使用van-image组件 -->
        <van-cell
            :title="n.yearName"
            :to="'/exam/' +n.id"
        >
          <template #label>
            <div class="ellipsis-content">已有{{n.yearNums}}人完成</div>
          </template>
          <template #value>
            <van-image
                slot="left"
                :src="n.yearImage"
                fit="cover"
                class="square-image"
            />
          </template>
        </van-cell>
      </van-swipe-cell>
    </van-list>
  </van-cell-group>
</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {get} from "../../util/request.js";
import {showToast} from "vant";
const onClickLeft = () => history.back();
const finished = ref(false);
const loading = ref(false);
const yearquestions = ref([]);
onMounted(async () => {
  get("home/yearquestions").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      yearquestions.value = r.data;
      finished.value = true;
    } else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("用户信息查询异常")
  });

})



</script>

<style scoped>
.ellipsis-content {
   display: -webkit-box; /* 对Webkit内核生效 */
   -webkit-line-clamp: 1; /* 行数 */
   -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
   overflow: hidden; /* 隐藏超出的内容 */
   text-overflow: ellipsis; /* 超出部分显示为省略号 */
   white-space: nowrap; /* 强制文本在一行内显示 */
   max-width: 10em; /* 或根据实际需要设置宽度 */
 }
.square-image {
  width: 100px; /* 根据需要设置宽度 */
  height: 100px; /* 保持与宽度相同，形成正方形 */
  margin-right: 10px; /* 可选，根据布局需求设置边距 */
}

</style>